<html>
<script src="http://localhost/js/lib/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://localhost/js/lib/jquery-create.js" type="text/javascript"></script>
<form action="/lottery/lucky/" method="POST">
<table border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#FFFFFF">
  <tr align="center">
	<td>
        <a href="/lottery/home/" class="style1">Home</a>
        <a href="/lottery/drawList/" class="style1">Now</a>
        <a href="/lottery/history/1/" class="style1">History</a>
        <a href="/lottery/refresh/" class="style1">Refresh</a>
        <a href="/lottery/lucky" class="style1">My lucky</a>
    </td>
  </tr>
  <tr>
	<td align="center">
        Lucky: {{ form.lucky }} <input type="Button" value="Get Lucky" onClick="get_lucky()"> <input type="Button" onClick="my_lucky($('#id_lucky').val())" value="My Lucky"><br/>
        {{ form.check }} <input type="Submit" value="Check">
    </td>
  </tr>
</table>
</form>
<script type="text/javascript">
//==== ==== ==== ====
//DELETE LUCKY
//==== ==== ==== ====
function delete_lucky(id) {
	$.get('/lottery/delete_lucky/' + id, {}, function(txt) {
		txt = txt.split(" ")
		$(txt[0]).remove()
	 })
}

function rate_video(rated) {
 $.post("/q3demotube/rate_video/",
       {video:"43", rate:rated},
       function(txt)
         {
         console.log(data);
         });
}

//==== ==== ==== ====
//GET LUCKY
//==== ==== ==== ====
function get_lucky()	{
$.getJSON("/lottery/get_lucky/", { }, function(json){
        n = insert_row(json)
        $('#id_lucky').val(n)
	});
}

//==== ==== ==== ====
//MY LUCKY
//==== ==== ==== ====
function my_lucky(string)	{

 $.ajax({
   type: "POST",
   url: "/lottery/my_lucky/",
   data: { lucky:string },
   dataType: "json",
   success: function(json){
     insert_row(json);
   }
 });

}
//==== ==== ==== ====
//INSERT NEW ROW
//==== ==== ==== ====
function insert_row(draws)	{
	id = draws[0].fields.draw
	luckyNumbers = [draws[i].fields.number for(i in draws)]
	console.log("luckyNumbers: " + luckyNumbers)
	console.log("Will create and insert row!!" )
    newRow = $.create(
	    "tr", {"id":id}, [
	        "td", {}, [" "],
	        "td", {}, [" "],
			"td", {}, [luckyNumbers.join(", ")],
			"td", {}, ["input", {"type":"button", "onclick":"delete_lucky("+ id +")", "value":"x",  "width":"7", "height":"7"}, []]
			]
	)
	$("#luckyTable tbody").append(newRow)
	return luckyNumbers
}
</script>
<div align="center" id="vsebina">
<table id="luckyTable" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#FFFFFF">
<tr>
    <th><b>Round</b></th>
    <th><b>Date</b></th>
    <th><b>Numbers</b></th>
    <th></th>
</tr>
{% for draw in draws %}
<tr id="{{ draw.id }}">
    <td> {{ draw.round_number }}</td>
    <td> {{ draw.date }}</td>
    <td> {{ draw.numbers_list }}</td>
    <td> <input type="button" onclick="delete_lucky('{{ draw.id }}')" value="x"  width="5" height="5"></td>
</tr>
{% endfor %}
</table>

</html>
<style type="text/css">
    <!--
    body {
        background-color: #3779AF;
    }
    body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFDB4C;
}
.style1 {color: #FFFFFF}
.style2 {font-size: 10px;}
-->
</style>
